<template>
  <div class="article-list">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div v-if="list.length==0" class="list-nodate">暂无数据</div>
        <div class="list">
          <div v-for="item in list" :key="item.id" class="item" @click="goDetail(item)">
            <img class="img" :src="item.firstImage|imgPath" alt="" srcset="">
            <div class="title">
              <div>{{item.title}}</div>
              <!-- <div>第二卷内容速览8</div> -->
            </div>
            <div class="extra">
              <div class="cell red">
                <van-icon name="like-o" size="18px"/>已收藏
              </div>
              <div class="cell">
                <van-icon name="upgrade" size="18px"/>下载
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
export default {
  props: ['type'],
  data () {
    return {
      page: 1,
      limit: 20,
      isLoading: false,
      loading: false,
      finished: false,
      list: []
    }
  },
  created () {},
  methods: {
    onRefresh () {
      this.page = 1
      this.finished = false
      this.getList(list => {
        this.list = list
        this.isLoading = false
      })
    },
    onLoad () {
      this.getList(list => {
        this.loading = false
        if (list.length < this.limit) {
          this.finished = true
        }
        if (this.page === 1) {
          this.list = list
        } else {
          this.list = this.list.concat(list)
        }
        this.page++
      })
    },
    goDetail (item) {
      const { id, typeId } = item
      const type = typeId === 1 ? 'video' : 'file'
      this.$router.push({
        path: `/study-center/detail/${type}/${id}`
      })
    },
    getList (callback) {
      // 学习记录
      this.$axios
        .get('/xbkj-dj/web/edu/collect/list', {
          type: this.type,
          current: this.page,
          size: this.limit
        })
        .then(res => {
          callback && callback(res.data.records)
        })
    }
  }
}
</script>
<style lang="less" scoped>
.article-list {
  background-color: #fff;
  .list-nodate {
    height: 116px;
    text-align: center;
    line-height: 116px;
    font-size: 14px;
    color: #ccc;
  }
}
.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 20px;
  .item {
    position: relative;
    flex: 0 0 48%;
    width: 48%;
    padding-bottom: 30px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
    .img {
      display: block;
      width: 100%;
      padding: 0 5px;
      box-sizing: border-box;
    }
    .title {
      line-height: 1.5;
      font-size: 12px;
      color: #999;
      padding: 0 10px;
      margin: 10px 0;
    }
    .extra {
      position: absolute;
      bottom: 10px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-around;
      font-size: 14px;
      .cell {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 50%;
        // padding: 5px 0 15px 0;
        &.red {
          color: #fd3921;
        }
        .van-icon {
          margin-right: 5px;
        }
        .van-icon-upgrade:before {
          transform: rotateX(180deg);
        }
      }
    }
  }
}
</style>
